<script>
    window.onload = function () {
        // Take care of some UI details
        var nick = prompt("Enter your nickname");     // Get user's nickname
        var input = document.getElementById("input"); // Find the input field
        input.focus();                                // Set keyboard focus

        // Open a WebSocket to send and receive chat messages on.
        // Assume that the HTTP server we were downloaded from also functions as
        // a websocket server, and use the same host name and port, but change
        // from the http:// protocol to ws://
        var socket = new WebSocket("ws://" + location.host + "/");

        // This is how we receive messages from the server through the web socket
        socket.onmessage = function (event) {          // When a new message arrives
            var msg = event.data;                     // Get text from event object
            var node = document.createTextNode(msg);  // Make it into a text node
            var div = document.createElement("div");  // Create a <div>
            div.appendChild(node);                    // Add text node to div
            document.body.insertBefore(div, input);   // And add div before input
            input.scrollIntoView();                   // Ensure input elt is visible
        }

        // This is how we send messages to the server through the web socket
        input.onchange = function () {                 // When user strikes return
            var msg = nick + ": " + input.value;      // Username plus user's input
            socket.send(msg);                         // Send it through the socket
            input.value = "";                         // Get ready for more input
        }
    };
</script>
<!-- The chat UI is just a single, wide text input field -->
<!-- New chat messages will be inserted before this element -->
<input id="input" style="width:100%"/>
